import React, {Component} from 'react'
import AlloyTouch from 'AlloyTouch';
//let alloytouch = require("alloytouch");
import Transform from 'css3transform';
import { connect } from 'dva';
import { my_scroll } from './MyScroll.less';

class MyScroll extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.scrollTarget=null;
       // this.handleScroll = this.throttle(this.changeScroll, 100);
    }

    preDF=(e)=>{
        e.preventDefault();
    }

    componentWillUnmount(){
        //console.log(1);
        let supportsPassive = false;
        try {
            let opts = Object.defineProperty({}, 'passive', {
                get: function() {
                    supportsPassive = true;
                }
            });
            window.addEventListener("test", null, opts);
        } catch (e) {}
        document.removeEventListener("touchmove", this.preDF, supportsPassive ? { passive: false } : false);
        this.scrollTarget=null;
    }

    changeScroll = (h) => {
        this.props.dispatch({ type: "app/changeScroll",  targetScrollHeight:h });
    }

    throttle(fn, delay) {
        let timer = null;
        // console.log(timer);
        return function () {
            const context = this;
            const args = arguments;         // Use the rest parameters instead of 'arguments'
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        };
    }

    componentDidMount() {
       //console.log(1);
      //   let target = document.querySelector("#scroller");
       //let bottomHeight= parseFloat(document.getElementsByTagName('html')[0].style.fontSize)*0.9;
        const wrap = document.getElementById("wrapperScrollUseMy");
        const than =this;
        Transform(this.targetName,true);
         // let target = document.querySelector("#scroller");
          //Transform(target,true);
       this.scrollTarget= new AlloyTouch({
            touch:"#wrapperScrollUseMy",//反馈触摸的dom
            target: this.targetName, //运动的对象
            // property: "translateY",  //被运动的属性
            min: -1000000, //不必需,运动属性的最小值,越界会回弹
           //  max: 0, //不必需,滚动属性的最大值,越界会回弹
            // vertical: true,//不必需，默认是true代表监听竖直方向touch
             sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
             factor: 1,//不必需,表示触摸位移与被运动属性映射关系，默认值是1
            // step: 45,//不必需，用于校正到step的整数倍
          // preventDefault:document.getElementById("#wrapperScrollUseMy"),
            change:(e,value)=>{
              //  console.log(e);
               // this.handleScroll(e);
                //console.log(this.props);
               // window.dispatchEvent(new Event('resize'));
                //window.dispatchEvent(new Event('scroll'));
                // if(this.targetName!=undefined){
                //     let wrap = document.getElementById("wrapperScrollUseMy");
                //     if(parseFloat(wrap.offsetHeight) >= parseFloat(this.targetName.offsetHeight) && this.scrollTarget.min!=0){
                //      //   console.log(1);
                //         this.scrollTarget.min=0;
                //     }else if(parseFloat(wrap.offsetHeight) < parseFloat(this.targetName.offsetHeight)){
                //         let sch = parseFloat(wrap.offsetHeight)-parseFloat(this.targetName.offsetHeight);
                //         if(this.scrollTarget.min!=sch){
                //             this.scrollTarget.min=parseFloat(wrap.offsetHeight)-parseFloat(this.targetName.offsetHeight);
                //         }
                //     }
                //   //  console.log(wrap.offsetHeight-this.targetName.offsetHeight-100);
                //    // this.scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-bottomHeight-parseFloat(this.targetName.offsetHeight);
                // }

                // if(e<scrollTarget.min){
                //     scrollTarget.to(parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight), 100);
                // }
                //   console.log(this.to);
                //  this.to(window.innerHeight-bottomHeight-this.target.offsetHeight, 100);
            }, //不必需，属性改变的回调。alloytouch.css版本不支持该事件
             touchStart:(e,value)=>{
                 if(this.targetName!=undefined){

                     if(parseFloat(wrap.offsetHeight) >= parseFloat(this.targetName.offsetHeight) && this.scrollTarget.min!=0){
                         //   console.log(1);
                         this.scrollTarget.min=0;
                     }else if(parseFloat(wrap.offsetHeight) < parseFloat(this.targetName.offsetHeight)){
                         let sch = parseFloat(wrap.offsetHeight)-parseFloat(this.targetName.offsetHeight);
                         if(this.scrollTarget.min!=sch){
                             this.scrollTarget.min=parseFloat(wrap.offsetHeight)-parseFloat(this.targetName.offsetHeight);
                         }
                     }
                     //  console.log(wrap.offsetHeight-this.targetName.offsetHeight-100);
                     // this.scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-bottomHeight-parseFloat(this.targetName.offsetHeight);
                 }
                //console.log(scrollTarget.min);

               //  scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight);
               //  console.log(scrollTarget.min);
             },
             touchMove:(e, value)=>{
                 // console.warn(e, this.scrollTarget.min, value, 'MyScroll....');
                 // console.warn(this.props.goodsDetailGoTo, value <= this.scrollTarget.min - 200, 'MyScroll...判断时候显示。。。。。。。。。。。。。。');
                 //
                 // if (this.props.goodsDetailGoTo) {
                 //     if (value <= this.scrollTarget.min - 200) {
                 //         console.warn('触发goTo。。。touchMove');
                 //         this.props.goTo();
                 //     }
                 // }

                 // scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight);
                 if(value<this.scrollTarget.min){
                    // this.scrollTarget.to(parseFloat(window.innerHeight)-parseFloat(this.targetName.offsetHeight), 600);
                 }
              //   console.log(this.to);
               //  this.to(window.innerHeight-bottomHeight-this.target.offsetHeight, 100);
             },
             touchEnd:(e,value)=>{
                 this.changeScroll(value);

                 // console.warn(this.props.goodsDetailGoTo, value <= this.scrollTarget.min - 160, 'MyScroll...判断时候显示。。。。。。。。。。。。。。');

                 if (this.props.goodsDetailGoTo) {
                     if (value <= this.scrollTarget.min - 160) {
                         console.warn('触发goTo。。。touchMove');
                         setTimeout(this.props.goTo, 100);
                     }
                 }


                // console.log(value);
              //   console.log(scrollTarget.min);
                // if(value<scrollTarget.min){
                 //    scrollTarget.to(parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight), 100);
             //    }
               //
               //  console.log(scrollTarget.to);
               //  scrollTarget.min=window.innerHeight-bottomHeight-this.targetName.offsetHeight;
             },
            // animationEnd:function(value){  } //运动结束
           property: "translateY",  //被滚动的属性
         //  sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
          // factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
         //  min: - 3000, //不必需,滚动属性的最小值
           max: 0, //不必需,滚动属性的最大值
           step: 50,
           animationEnd: function (value) {
               than.changeScroll(value);
               //   console.log(this.to);
               // this.to(window.innerHeight-bottomHeight-this.target.offsetHeight, 100);
             //  console.log(than);
           },
           pressMove: function (value) {


                   //   console.log(scrollTarget.min);
                   // scrollTarget.min=window.innerHeight-bottomHeight-this.targetName.offsetHeight;

           },
           bindSelf:true
        });

        this.props.getAlloyTouch(this.scrollTarget);
        //console.log(this.targetName.offsetHeight);
        //console.log(scrollTarget);
        //console.log(scrollTarget.stop)
        let supportsPassive = false;
        try {
            let opts = Object.defineProperty({}, 'passive', {
                get: function() {
                    supportsPassive = true;
                }
            });
            window.addEventListener("test", null, opts);
        } catch (e) {}
        document.addEventListener("touchmove", this.preDF, supportsPassive ? { passive: false } : false);
        this.changeScroll(0);


    }

    render() {
        const { className='', style,cc ,aa} = this.props;

        return (
            <div
                id="wrapperScrollUseMy"
                className={ `${className} ${my_scroll}` }
                style={style}
                >
                <div id="ScrollUseMy" style={cc?{paddingBottom:"5rem"}:aa?{}:{paddingBottom:"2.5rem"}} ref={ref=>this.targetName=ref}>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

MyScroll.defaultProps = {
    getAlloyTouch: () => {}
};

export default connect(({ app }) => ({ app }))(MyScroll);

/*
 * 自定义滚动组件
 * */
